<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        /* 同样在所有的浏览器，下面的例子会显示的图像标记： */
        ul {
            /* 设置列表类型为没有列表项标记 */
            list-style-type: none;
            /* 设置填充和边距 0px（浏览器兼容性） */
            padding: 0px;
            margin: 0px;
        }

        ul li {
            /* 设置图像的 URL，并设置它只显示一次（无重复）  */
            background-image: url('images/sqpurple.gif');
            background-repeat: no-repeat;
            /* 您需要的定位图像位置（左 0px 和上下 5px） */
            background-position: 0px 5px;
            /* 用 padding-left 属性把文本置于列表中 */
            padding-left: 14px;
        }
    </style>
</head>

<body>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
</body>

</html>